<template>
	<div class="scrollMenu border_t1">
		<div class="wrapper">
			<a href="javascript:void(0)" @click="linkTo(0)" :class="{'active':isActive[0]}">
				<i class="iconfont icon-mall"></i><br>甄选
			</a>
			<a href="javascript:void(0)" @click="linkTo(1)"  :class="{'active':isActive[1]}">
				<i class="iconfont icon-user"></i><br>我的
			</a>
		</div>
	</div>
</template>

<script type="text/javascript">
export default{
	data(){
		return{
			isActive: [true,false,false,false],
			now:0
		}
	},
	methods:{
		linkTo(index){
			switch(index){
				case 0:
					this.$router.push({name:'index'});
					break;
				case 1:
					this.$router.push({name:'login'});
					break;
			}

			this.isActive = [false,false,false,false];
			this.isActive[index] = true;
		}
	}
}
</script>

<style lang="scss" scoped>
.scrollMenu{
  position:fixed;bottom:0;left:0;width: 100%;max-width:750px;left:50%;transform:translate(-50%,0);height:.98rem;background-color: #fff;z-index:888;
  .wrapper{
    display:table;width:100%;background-color: #fff;margin:auto;
    a{
      display:table-cell;width:25%;box-sizing:border-box;text-align: center;height:.98rem;vertical-align: middle;font-size:.18rem;
      color:#c7c7c7;
      .iconfont{font-size:.41rem;margin-bottom:.08rem;color:#c7c7c7;}
      &.active .iconfont,&.active{color:#9c7860}
    }
  }
}
</style>